<template>
  <div style="width: 100%; display: flex; align-items: center">
    <div>
      <span><em>*</em>商品名称：</span>
      <el-autocomplete
        v-model="form.value"
        ref="searchSelect"
        class="wid240 main_comm"
        @clear="$refs.searchSelect.$children[0].blur()"
        :fetch-suggestions="querySearchAsync"
        placeholder="商品/助记码/编码"
        clearable
        :highlight-first-item="true"
        value-key="name"
        @select="handleSelect"
      >
        <template slot-scope="{ item }">
          <div class="main_name">
            <span>
              {{ item.goods.name }}【{{
                item.spu_name ? item.spu_name.title : ""
              }}】
            </span>
            <span class="main_addr" v-if="info.show_sku_code == 1">{{
              item.goods_spu_code
            }}</span>
          </div>
        </template>
      </el-autocomplete>
    </div>

    <div style='margin:0 20px'>
      <span><em>*</em>数量：</span>
      <el-input
        v-model.trim="form.num"
        placeholder="数量"
        clearable
        type="number"
        class="wid140"
        @input="handleInput"
        @keyup.enter.native="handleConfirm"
      ></el-input>
    </div>
    <div class="">
      <el-button
        type="primary"
        :disabled="disabled"
        @click="handleConfirm"
        >确认(回车)</el-button
      >
      <el-button class="reset marginLeft5" type="info" @click="reset"
        >重置</el-button
      >
    </div>
  </div>
</template>

<script>
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { goods_getAllGoodsSpu } from "@/api/currency";
import { getOfferPrice,getMemberInfo } from "@/api/order/orderList";
export default {
  data() {
    return {
      disabled: true,
      isDown: true,
      form:{
        value:'',
        num:''
      },
      selected:null,
      info:{}
    };
  },
  created(){
    
  },
  methods: {
    setData(info){
      this.info = info
      getMemberInfo({id:this.info.uid}).then(res=>{
        this.group_id = res.data.info.group_id
      })
    },
    reset(){
      this.form = {
        value:'',
        num:''
      }
      this.disabled = true
    },
    handleSort() {
      
    },
    handleConfirm(){
      this.$emit("confirm",{selected:this.selected,num:this.form.num})
      this.reset()
    },
    handleSelect(val){
      getOfferPrice({
        goods_id:val.goods_id,
        goods_spu_id:val.id,
        uid:this.info.uid,
        group_id:this.group_id
      }).then(res=>{
        val.order_price =  res.data.price
        val.goods_spu_id = val.id
        val.id = null

        this.selected = val
        this.disabled = !(this.form.num && val)
      })
    },
    handleInput(val){
      this.disabled = !(val && this.selected)
    },
    querySearchAsync(queryString, cb) {
      if (!queryString || queryString.trim() == "") {
        cb([]);
        return;
      }
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, {
                name: queryString.trim(),
              })
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        {
          name: queryString.trim(),
        }
      );
      goods_getAllGoodsSpu(data).then((res) => {
        if (res.errcode == 0) {
          res.data.goods.map((e) => {
            let title = e.spu_name ? e.spu_name.title : "";
            e.name = e.goods.name + "【" + title + "】";
          });
          var results = res.data.goods;
          if (this.$refs.searchSelect) {
            this.$refs.searchSelect.activated = true;
          }
          cb(results);
        } else {
          this.$message.error(res.errmsg);
          cb([]);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>

/deep/.el-input__inner::-webkit-outer-spin-button,
/deep/.el-input__inner::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

em{
    color: #EB0A0A;
    margin-right: 5px;
}

.svg_box {
  display: flex;
  align-items: center;
  margin-left: 15px;
  .navbar_svg {
    margin-left: 8px;
  }
}


</style>